<template>
  <div>
    <mini-head :title="$route.name" />
    <div v-if="isshow">
      <!-- 密码输入框 -->
      <van-password-input
        :value="value"
        info="密码为 6 位数字"
        :error-info="errorInfo"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard
        v-model="value"
        :show="showKeyboard"
        @blur="showKeyboard = false"
      />
    </div>
    <div v-else>
      <div class="box"></div>
      <main>
        <div class="demo-image__preview">
          <el-image
            style="width: 100px; height: 100px"
            src="https://img1.baidu.com/it/u=4037038380,2289619990&fm=26&fmt=auto"
            :preview-src-list="srcList"
          >
          </el-image>
        </div>
        <div class="demo-image__preview">
          <el-image
            style="width: 100px; height: 100px"
            src="https://img1.baidu.com/it/u=255171752,2020837879&fm=26&fmt=auto"
            :preview-src-list="srcList"
          >
          </el-image>
        </div>
        <div class="demo-image__preview">
          <el-image
            style="width: 100px; height: 100px"
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2Fbbdb855244661510e99874ae5f51d6ce5e96deae1b054-dh2FVk_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644220135&t=280b2346642eb1303e67d34e838dee44"
            :preview-src-list="srcList"
          >
          </el-image>
        </div>
        <div class="demo-image__preview">
          <el-image
            style="width: 100px; height: 100px"
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201507%2F04%2F20150704223415_M2Nwc.thumb.700_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644411736&t=faa7f13a102e8f58a2e52e0f1e83811b"
            :preview-src-list="srcList"
          >
          </el-image>
        </div>
        <div class="demo-image__preview">
          <el-image
            style="width: 100px; height: 100px"
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fkanimg.9ku.com%2Fkanqq%2Fpic%2Fupload%2F2018%2F0816%2Fd1c6dab1642c0ba5cce3d82b9d0dc83b.jpg&refer=http%3A%2F%2Fkanimg.9ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644411790&t=8b54863ee8e3b0fa3b891566f4af2248"
            :preview-src-list="srcList"
          >
          </el-image>
        </div>
        <div class="demo-image__preview">
          <el-image
            style="width: 100px; height: 100px"
            src="http://i1.shaodiyejin.com/uploads/tu/201804/9999/e302e4af95.jpg"
            :preview-src-list="srcList"
          >
          </el-image>
        </div>
        <img src="https://img1.baidu.com/it/u=296492155,1500952413&fm=26&fmt=auto" alt="">
      </main>
    </div>
    <tabbar />
  </div>
</template>

<script>
import MiniHead from '../../components/MiniHead.vue'
import Tabbar from '../../components/Tabbar.vue'
import { Toast } from 'vant'
export default {
  data () {
    return {
      value: '',
      errorInfo: '',
      showKeyboard: true,
      isshow: true,
      srcList: [
        'https://img1.baidu.com/it/u=4037038380,2289619990&fm=26&fmt=auto',
        'https://img1.baidu.com/it/u=255171752,2020837879&fm=26&fmt=auto',
        'http://i1.shaodiyejin.com/uploads/tu/201804/9999/e302e4af95.jpg',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201507%2F04%2F20150704223415_M2Nwc.thumb.700_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644411736&t=faa7f13a102e8f58a2e52e0f1e83811b',
        'https://img0.baidu.com/it/u=1225326885,4085025579&fm=26&fmt=auto',
        'https://img1.baidu.com/it/u=296492155,1500952413&fm=26&fmt=auto',
        'https://img1.baidu.com/it/u=3487188083,2699921991&fm=26&fmt=auto',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2Fbbdb855244661510e99874ae5f51d6ce5e96deae1b054-dh2FVk_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644220135&t=280b2346642eb1303e67d34e838dee44'
      ]
    }
  },
  watch: {
    value (value) {
      if (value.length === 6 && value !== '123455') {
        Toast.fail('密码错误')
        this.errorInfo = '密码错误'
        this.$router.push('/home')
      }
      if (value.length === 6 && value === '123455') {
        this.errorInfo = '密码正确'
        this.isshow = false
      }
    }
  },
  components: { Tabbar, MiniHead }
}
</script>

<style lang="scss" scoped>
.van-password-input {
  transform: translateY(-400%);
  z-index: 1000;
}
.box {
  width: 100vw;
  height: 100vh;
  background-image: url('../../assets/img/美女.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
}
main {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap-reverse;
  align-items: stretch;
  padding-top: 1.6667rem;
  margin-bottom: 2rem;
  width: 100vw;
  height: 1000px;
  margin-bottom: 200px;
  // overflow-y: auto;
  // overflow-x: hidden;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba($color: #faf9f9, $alpha: 0.5);
  img{
    width: 200px;
    height: 300px;
    position: absolute;
    left: 23%;
    right: 0;
    bottom: 0;
    top: 18%;
  }
}
</style>
